<template>
  <div class="notice-bar--wrapper">
    <!-- <i class="el-icon-info"></i> -->
    <div class="scroll--body">
      <div class="scroll--main">
        <span class="scroll--text">{{ text }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
}
</script>
<style lang="scss" scoped>
.notice-bar--wrapper {
  // border: 1px solid rgb(255, 224, 224);
  display: flex;
  padding: 10px;
  border-radius: 2px;
}
.el-icon-info {
  color: red;
  font-size: 18px;
}
.scroll--body {
  flex: 1;
  overflow: hidden;
}
.scroll--main {
  display: inline-block;
  white-space: nowrap;
  animation: loop-scroll 12s linear infinite;
  padding-left: 100%;
}
.scroll--text {
  color: red;
  font-size: 14px;
}
@keyframes loop-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>